import axios from 'axios'
import React,{useState,useEffect,useMemo} from 'react'

export default function ShopCart() {
  const [list,setList]=useState([])
  useEffect(()=>{
    fetchShopCartListApi()
  },[])
  //网络请求购物车列表
  const fetchShopCartListApi=async()=>{
    let result=await axios.get('http://www.zhaijizhe.cn:3001/shopcart/getShopcartData')
    console.log(result.data.data);
    setList(result.data.data)
  }
  //改变(增加或减少数量)数量的方法
  const changeNumApi=async(_id,n)=>{
    let result=await axios.post("http://www.zhaijizhe.cn:3001/shopcart/changeNum",{_id,n})
    if(result.data.code){
      fetchShopCartListApi()
    }
  }
  //改变文本框中的数量
  const changeNumToInput=(index,inputnum)=>{
    //将当前位置的商品中的数量num改成输入的inputnum
    list[index].num=inputnum
    //改变函数组件中的状态list
    setList(()=>{
      return[
        ...list
      ]
    }) 
  }
  const changeNumOver=async(_id,n)=>{
    let result=await axios.post('http://www.zhaijizhe.cn:3001/shopcart/changeNumByInput',{_id,n})
    if(result.data.code){
      fetchShopCartListApi()
    }
  }
  const checkedItem=async(_id)=>{
    let result=await axios.get("http://www.zhaijizhe.cn:3001/shopcart/checkProducts",{params:{_id}})
    if(result.data.code){
      fetchShopCartListApi()
    }
  }
  const total=useMemo(()=>{
    return list.filter(item=>item.checked).reduce((pre,cur)=>pre+cur.price*cur.num,0)
  },[list])
  return (
    <div>
        <h1>购物车</h1>
        <table>
           <thead>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>更新时间</td>
                </tr>
           </thead>
           <tbody>
              {
                list.map((item,index)=><tr key={item._id}>
                    <td>
                        <input type="checkbox" checked={item.checked} onChange={()=>{checkedItem(item._id)}}/>
                    </td>
                    <td>
                        {item.name}
                    </td>
                    <td>
                        {item.price}
                    </td>
                    <td>
                        <button onClick={()=>{changeNumApi(item._id,-1)}}>-</button>
                        <input type="text" value={item.num} 
                            onChange={(e)=>{changeNumToInput(index,e.target.value)}}
                            onBlur={(e)=>{changeNumOver(item._id,e.target.value)}}/>
                        <button onClick={()=>{changeNumApi(item._id,1)}}>+</button>
                    </td>
                    <td>
                        {item.price*item.num}
                    </td>
                    <td>
                        {item.updateDate}
                    </td>
                </tr>)
              }
              <tr>
                <td colSpan={5}>
                    总价：{total}
                </td>
              </tr>
           </tbody>
        </table>
    </div>
  )
}
